/*
 * @Author: Wxx
 * @Date: 2022-02-24 15:52:01
 * @LastEditors: Wxx
 * @LastEditTime: 2022-02-25 15:46:22
 * @Description:
 */
import React, { useEffect, useState } from "react";
import axios from "axios";
import { useHistory } from "react-router-dom";

import "../css/Nowplaying.css";

export default function Nowplayying(props) {
  const [list, setList] = useState([]);
  const history = useHistory();
  useEffect(() => {
    axios({
      url: "https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=5409899",
      headers: {
        "X-Client-Info":
          '{"a":"3000","ch":"1002","v":"5.2.0","e":"16456705843845365824487425"}',
        "X-Host": "mall.film-ticket.film.list",
      },
    }).then((res) => {
      setList(res.data.data.films);
    });
  }, []);

  const handleGoDetail = (id) => {
    // window.location.href = "#/detail/" + id;
    // props.history.push(`/detail/${id}`);

    // 动态穿参数
    // history.push(`/detail/${id}`);

    // 通过query传参数
    history.push({
      pathname: "/detail",
      query: {
        id,
      },
    });

    // 通过state传参数
    // history.push({
    //   pathname: "/detail",
    //   state: {
    //     id,
    //   },
    // });
  };
  return (
    <div
      style={{ height: "calc(100vh - 340px)", overflow: "auto", padding: 16 }}
    >
      {list.map((item) => (
        <div
          style={{ display: "flex" }}
          key={item.filmId}
          onClick={() => handleGoDetail(item.filmId)}
        >
          <img
            style={{ marginRight: 8, marginBottom: 10 }}
            width="66"
            height="94"
            src={item.poster}
            alt={item.name}
          />
          <div>
            <p>
              {/* <NavLink to={"/detail/" + item.filmId}>{item.name} </NavLink> */}
              {item.name}
            </p>
            <span className="synopsis">{item.synopsis}</span>
          </div>
        </div>
      ))}
    </div>
  );
}
